<template>
  <div class="setting">
    <!-- 资料完成度 -->
    <div class="self-prebox">
      <p class="self-line"></p>
      <div class="self-circle self-91">
        <span class="ciclespan">资料完整度</span>
        <el-progress
          type="circle"
          :percentage="percentage"
          :stroke-width="4"
          color="#009966"
          :width="100"
        ></el-progress>
      </div>
    </div>
    <el-tabs>
      <!-- 账号信息，功能暂时未做，做了一个昵称洗洗 -->
      <el-tab-pane>
        <span class="tabspanfont" slot="label">账号信息</span>
        <div class="contentinfo">
          <p>
            <i class="el-icon-user-solid" style="paddingRight:10px"></i>
            <span>昵称：</span>
            <span style="paddingRight:20px;fontSize:14px;color:#009966">
              {{ kgcUser.nickname }}
            </span>
            <span>
              <el-link type="info" @click="nickNamedialogVisible = true"
                >修改</el-link
              >
            </span>
          </p>
          <p>
            <i class="el-icon-lock" style="paddingRight:10px"></i>
            <span>密码：</span>
            <span style="paddingRight:20px">*********</span>
            <span><el-link type="info">修改</el-link></span>
          </p>
          <p>
            <i class="el-icon-message" style="paddingRight:10px"></i>
            <span>邮箱：</span>
            <span style="paddingRight:20px;fontSize:14px;color:#009966">
              {{ kgcUser.email | emailFilter }}
            </span>
            <span><el-link type="info">修改</el-link></span>
          </p>
          <p>
            <i class="el-icon-mobile-phone" style="paddingRight:10px"></i>
            <span>手机：</span>
            <span style="paddingRight:20px;fontSize:14px;color:#009966">{{
              kgcUser.phone | moblieFilter
            }}</span>
            <span><el-link type="info">修改</el-link></span>
          </p>
        </div>
      </el-tab-pane>
      <!-- 昵称弹出框 -->
      <el-dialog
        title="昵称修改"
        :visible.sync="nickNamedialogVisible"
        width="27%"
        :close-on-click-modal="false"
        top="35vh"
      >
        <el-form
          :model="nickNameForm"
          :rules="nickNameFormRules"
          ref="nickNameFormRef"
          label-width="100px"
        >
          <el-form-item label="昵称：" prop="nickName">
            <el-input
              size="medium"
              placeholder="4-12位字符、英文、数字或者中文"
              v-model="nickNameForm.nickName"
              class="nickinput"
            ></el-input>
          </el-form-item>
        </el-form>
        <div class="formitemanniu">
          <el-button @click="updateNickName" type="primary" style="width:90px;"
            >保存</el-button
          >
        </div>
      </el-dialog>
      <!-- 昵称弹出框结束 -->

      <!-- 个人资料 -->
      <el-tab-pane
        ><span class="tabspanfont" slot="label">个人资料</span>
        <div class="contentinfo">
          <el-form ref="form" :model="kgcUser" label-width="120px" size="mini">
            <el-form-item>
              <span slot="label"> <i class="el-icon-s-custom"></i> 姓名：</span>
              <el-input
                v-model="kgcUser.realname"
                style="width: 190px;"
              ></el-input>
            </el-form-item>

            <el-form-item>
              <span slot="label"> <i class="el-icon-female"></i> 性别：</span>
              <el-radio v-model="kgcUser.sex" :label="0">男</el-radio>
              <el-radio v-model="kgcUser.sex" :label="1">女</el-radio>
              <el-radio v-model="kgcUser.sex" :label="2">保密</el-radio>
            </el-form-item>

            <el-form-item>
              <span slot="label">
                <i class="el-icon-potato-strips"></i> 生日：</span
              >
              <el-date-picker
                type="date"
                placeholder="选择日期"
                v-model="kgcUser.birthday"
                value-format="timestamp"
                style="width: 190px;"
              ></el-date-picker>
            </el-form-item>

            <el-form-item>
              <span slot="label"> <i class="el-icon-school"></i> 学校：</span>
              <el-input
                v-model="kgcUser.school"
                style="width: 190px;"
              ></el-input>
            </el-form-item>

            <el-form-item>
              <span slot="label">
                <i class="el-icon-collection-tag"></i> 专业：</span
              >
              <el-input
                v-model="kgcUser.professional"
                style="width: 190px;"
              ></el-input>
            </el-form-item>

            <el-form-item>
              <span slot="label">
                <i class="el-icon-location-outline"></i> 现居地：</span
              >
              <el-select
                style="width:90px; marginRight:10px;"
                @change="getCity"
                v-model="kgcUser.district.pid"
              >
                <el-option label="请选择" :value="0"> </el-option>
                <el-option
                  v-for="item in districts"
                  :key="item.id"
                  :label="item.d_name"
                  :value="item.id"
                >
                </el-option>
              </el-select>
              <el-select style="width:110px" v-model="kgcUser.address_city">
                <el-option label="请选择" :value="0"> </el-option>
                <el-option
                  v-for="item in citys"
                  :key="item.id"
                  :label="item.d_name"
                  :value="item.id"
                >
                </el-option>
              </el-select>
            </el-form-item>

            <el-form-item>
              <span slot="label">
                <i class="el-icon-edit"></i>
                个性签名：</span
              >
              <el-input
                v-model="kgcUser.signname"
                style="width: 350px;"
              ></el-input>
            </el-form-item>

            <el-form-item size="large" style="marginTop:60px;">
              <el-button
                style="background:#009966;color:white;width:90px;"
                @click="onSubmit"
                >保存</el-button
              >
            </el-form-item>
          </el-form>
        </div>
      </el-tab-pane>

      <!-- 头像信息，这里我要使用crobber插件 -->
      <el-tab-pane
        ><span class="tabspanfont" slot="label">头像</span>
        <Cropper></Cropper>
      </el-tab-pane>
    </el-tabs>
  </div>
</template>

<script>
import Cropper from './Cropper.vue'
export default {
  data() {
    var checkNickName = (rules, value, cb) => {
      if (!value) return cb(new Error('昵称不可为空'))
      const usernameRegex = /^([\u4e00-\u9fa5]{2,4})|\w{4,12}$/
      if (!usernameRegex.test(value) || value.length > 12) {
        return cb(new Error('昵称必须为4-12位字符、英文、数字或者中文'))
      }
      return cb()
    }
    return {
      nickNameForm: {
        nickName: '',
        uid: this.$store.state.uid
      },
      nickNameFormRules: {
        nickName: [{ validator: checkNickName, trigger: 'blur' }]
      },
      // 控制昵称对话框显示
      nickNamedialogVisible: false,
      kgcUser: {
        district: { pid: 0 }
      },
      // 所有省份信息
      districts: [],
      // 所有省份对应的市区信息
      citys: [],
      percentage: 0
    }
  },
  methods: {
    // 修改用户昵称
    updateNickName() {
      this.$refs.nickNameFormRef.validate(async valid => {
        if (!valid) return this.$message.error('输入不合法')
        const { data: res } = await this.$http.post(
          'updateNickName.calc',
          this.nickNameForm
        )
        if (res.code !== '200') return this.$message.error('昵称修改失败')
        this.$message.success({ message: '昵称修改成功', offset: 250 })
        await this.$store.dispatch('initUser', this.$store.state.uid)
        this.kgcUser = this.$store.state.kgcUser
        this.calcInfoFull()
        this.nickNamedialogVisible = false
      })
    },
    // 计算资料完整度
    calcInfoFull() {
      let num = 0
      if (this.kgcUser.address_city !== 0) num++
      if (this.kgcUser.birthday !== 0) num++
      if (this.kgcUser.sex !== 2) num++
      if (this.kgcUser.email && this.kgcUser.email != '') num++
      if (this.kgcUser.nickname && this.kgcUser.nickname != '') num++
      if (this.kgcUser.realname && this.kgcUser.realname != '') num++
      if (this.kgcUser.school && this.kgcUser.school != '') num++
      if (this.kgcUser.professional && this.kgcUser.professional != '') num++
      if (this.kgcUser.signname && this.kgcUser.signname != '') num++
      this.percentage = parseInt((num / 9) * 100)
    },
    async onSubmit() {
      if(!this.kgcUser.birthday) this.kgcUser.birthday = 0
      const { data: res } = await this.$http.post(
        'updateUser.calc',
        this.kgcUser
      )
      if (res.code !== '200') return this.$message.error('修改失败')
      this.calcInfoFull()
      this.$message.success('修改成功！')
    },
    async getCity() {
      this.kgcUser.address_city = 0
      const { data: res } = await this.$http.get('getCityByProv.calc', {
        params: {
          provId: this.kgcUser.district.pid
        }
      })
      this.citys = res.data
    }
  },
  async created() {
    if (!this.$store.state.kgcUser.nickname) {
      await this.$store.dispatch('initUser', this.$store.state.uid)
      this.kgcUser = this.$store.state.kgcUser
    } else {
      this.kgcUser = this.$store.state.kgcUser
    }
    const { data: res } = await this.$http.get('getAllProvince.calc')
    this.districts = res.data
    if (this.kgcUser.address_city !== 0) {
      const { data: res } = await this.$http.get('getCityByProv.calc', {
        params: {
          provId: this.kgcUser.district.pid
        }
      })
      this.citys = res.data
    }
    this.calcInfoFull()
  },
  filters: {
    emailFilter(value) {
      if (!value) return value
      return value.substr(0, 1) + '****' + value.substr(value.indexOf('@') - 1)
    },
    moblieFilter(value) {
      if (!value) return value
      return value.substr(0, 3) + '****' + value.substr(7)
    }
  },
  components: {
    Cropper
  }
}
</script>

<style lang="less" scoped>

/deep/ .el-tabs__nav-scroll{
  height: 47px;
}

/deep/ .el-tabs__item{
  height: 47px;
  color: #5a5a5a;
}

.nickinput {
  width: 75%;
}
.formitemanniu {
  text-align: center;
}
/deep/ .el-dialog__header {
  background-color: #009966 !important;
  height: 30px;
  padding: 10px 0 0 15px;
  .el-dialog__headerbtn {
    top: 10px;
  }
  .el-dialog__title {
    line-height: 8px;
    font-size: 16px;
    color: #fff;
  }
  .el-dialog__headerbtn .el-dialog__close {
    color: #fff;
  }
}

/deep/ .el-progress__text {
  font-size: 23px !important;
  color: #009966;
  margin-top: 13px;
}
.self-prebox,
.self-line {
  position: absolute;
  top: 45px;
}

.ciclespan {
  position: absolute;
  font-size: 12px;
  top: 43%;
  left: 20%;
}

.self-line {
  width: 2px;
  height: 25px;
  background: #d8d8d8;
  left: 26%;
  top: -19px;
}

.self-prebox {
  right: 20px;
  padding-top: 25px;
}

/deep/ .el-tabs__nav-wrap::after {
  height: 1px !important;
}

.setting {
  color: #5a5a5a;
  font-size: 16px;
}

.tabspanfont {
  font-size: 16px;
  line-height: 47px;
}

.el-tabs {
  margin-left: 10px;
}

/deep/ .el-tabs__active-bar {
  background-color: #009966;
  font-weight: 700;
}

/deep/ .el-tabs__item.is-active {
  font-weight: 550;
  color: #5a5a5a;
}

/deep/ .el-tabs__item:hover {
  color: #009966;
}

.contentinfo {
  margin-left: 7%;
  margin-top: 7%;
}

p {
  margin: 20px;
}
</style>
